<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple topleft">
          <h3>运营人员（当天）</h3>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <h1>{{list1.total}}</h1>
                <p>工单总数（个）</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                <h1>{{list1.completedTotal}}</h1>
                <p>完成工单（个）</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <h1>{{list1.cancelTotal}}</h1>
                <p>拒绝工单（个）</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                <h1>{{list1.workerCount}}</h1>
                <p>运营人员数（个）</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light topright">
          <h3>运维人员（当天）</h3>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <h1>{{list2.total}}</h1>
                <p>工单总数（个）</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                <h1>{{list2.completedTotal}}</h1>
                <p>完成工单（个）</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <h1>{{list2.cancelTotal}}</h1>
                <p>拒绝工单（个）</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                <h1>{{list2.workerCount}}</h1>
                <p>运维人员数（个）</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="button">
      <el-col :span="16">
        <div class="grid-content bg-purple buttonleft">
          <div class="block">
            <span class="demonstration">工单状态</span>
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
            <el-empty description="暂无数据"></el-empty>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple buttonright">
          <h3>人效排名（月度）</h3>

          <!-- <el-dropdown>
            <span class="el-dropdown-link">
              全部
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
          </el-dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>黄金糕</el-dropdown-item>
          </el-dropdown-menu> -->
          <div style="width:20px;height:20px"></div>

          <div class="list">
            <el-row :gutter="20" v-for="item in list" :key="item.id">
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <img src="@/assets/1.png" alt srcset />
                </div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">{{item.userName}}</div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple">{{item.workCount}}单</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { taskReportInfo, taskReportInfoList } from '@/api/kuser'
export default {
  name: 'Dkd3Status',

  data () {
    return {
      value1: '',
      isCollapse: true,
      list1: [],
      list2: [],
      list: []
    }
  },
  created () {
    this.taskReportInfo()
    this.taskReportInfoList()
  },
  methods: {
    // 获取上面表头的数据
    async taskReportInfo () {
      const res = await taskReportInfo()
      // console.log(res)
      this.list1 = res[0]
      this.list2 = res[1]
      // console.log(this.list1)
    },
    async taskReportInfoList () {
      const res = await taskReportInfoList()
      // console.log(userName, workCount)
      console.log(res)
      this.list = res
    }
  }
}
</script>

<style lang="less" scoped>
.topleft {
  h3 {
    text-align: left;
  }
  h1 {
    margin-top: 40px;
    font-size: 40px;
    color: #072074;
  }
  p {
    color: #91a7dc;
    font-size: 14px;
  }
  background-color: #e2efff;
  height: 200px;
  border-radius: 20px;
  padding: 15px;
  margin-right: 10px;
}
.topright {
  h3 {
    text-align: left;
  }
  h1 {
    margin-top: 40px;
    font-size: 40px;
    color: #ff5757;
  }
  p {
    color: #de9690;
    font-size: 14px;
  }
  background-color: #fbefe8;
  height: 200px;
  border-radius: 20px;
  margin-left: 10px;
  padding: 15px;
}
</style>

<style lang="less" scoped>
.list {
  margin-top: 20px;
  height: 100%;
  background-color: #fff;
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  line-height: 36px;
  img {
    transform: translateY(3px);
  }
}
.button {
  margin-top: 20px;
  .buttonleft {
    padding: 20px;
    height: 600px;
    background-color: #fff;
    border-radius: 20px;
  }
  .buttonright {
    padding: 20px;
    height: 600px;
    background-color: #fff;
    border-radius: 20px;
    h3 {
      float: left;
      font-size: 16px;
    }
    span {
      transform: translateX(30px) !important;
    }
  }
  .demonstration {
    float: left;
  }
}
.el-empty {
  transform: translateY(100px);
}
</style>
